<template>
  <div>
    <div>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="姓名">
            <el-input v-model="name"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model.number="telNum"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary"
                       @click="getUserList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form-item label="职位">
          <el-select v-model="roleId"
                     placeholder="请选择">
            <el-option v-for="item in roles"
                       :key="item.roleId"
                       :label="item.roleName"
                       :value="item.roleId"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <el-table ref="multipleTable"
                border
                stripe
                :data="userList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column prop="name"
                         label="姓名"></el-table-column>
        <el-table-column prop="phone"
                         label="手机号"></el-table-column>
        <el-table-column prop="createdTime"
                         label="创建时间"></el-table-column>
        <el-table-column prop="roleName"
                         label="职位"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="set(scope.row.userId)"
                       type="text"
                       size="small">设置</el-button>
            <el-button @click="detail(scope.row.userId)"
                       type="text"
                       size="small">详情</el-button>
            <el-button @click="del(scope.row.userId)"
                       type="text"
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { api } from '@/api'

export default {
  data() {
    return {
      name: null,
      telNum: null,
      roleId: null,
      currentPage: 0,
      total: null,
      userList: [],
      roles: []
    }
  },
  activated() {
    this.getUserList()
    this.getRoleList()
  },
  components: { viewPage },
  methods: {
    reset() {
      this.name = null
      this.telNum = null
      this.roleId = null
      this.currentPage = 0
      this.getUserList()
    },
    getUserList() {
      const params = {
        name: this.name,
        telNum: this.telNum,
        roleId: this.roleId,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.USER_LIST, params).then(
        res => {
          if (res.result.hasContent) {
            this.userList = res.result.content
            this.currentPage = res.result.pageNumber
            this.total = res.result.totalElements
          } else {
            this.userList = []
            this.currentPage = 0
            this.total = null
          }
        }
      )
    },
    getRoleList() {
      this.$http.get(api.USER_ROLE_LIST).then(
        res => {
          this.roles = res.result
        }
      )
    },
    del(id) { },
    set(id) {
      this.$router.push({
        name: 'userInfo',
        params: { userId: id, infoFlag: '0' }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'userInfo',
        params: { userId: id, infoFlag: '1' }
      })
    },
    pageChange(page) {
      this.currentPage = page - 1
      this.getUserList()
    }
  }
}
</script>
